import styles from './Login.module.scss'
import {Button, Input, Space} from "antd";
import {ChangeEvent, useEffect, useState} from "react";
import {getCaptcha, LoginApi} from "@/api";
const Login = () => {

    useEffect(() => {
        getCaptchaImage()
    }, [])

    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")
    const [captcha, setCaptcha] = useState("")
    const [imageSrc, setImageSrc] = useState("")
    const changeUsername = (e:ChangeEvent<HTMLInputElement>) => {
        setUsername(e.target.value)
    }
    const changePassword = (e:ChangeEvent<HTMLInputElement>) => {
        setPassword(e.target.value)
    }
    const changeCaptcha = (e:ChangeEvent<HTMLInputElement>) => {
        setCaptcha(e.target.value)
    }
    const getCaptchaImage = () => {
        getCaptcha().then(res => {
            if (res.code === 200) {
                setImageSrc('data:image/gif;base64,' + res.img)
                localStorage.setItem('uuid', res.uuid)
            }
        })
    }
    const handleLogin = () => {
        console.log(username)
        console.log(password)
        console.log(captcha)
        LoginApi({
            username: username,
            password: password,
            code: captcha,
            uuid: localStorage.getItem('uuid') as string
        }).then(res => {
            console.log(res)
        })
    }
    return (
        <div className={styles.loginPage}>
            <div className={styles.loginBox}>
                <div className={styles.title}>
                    <h1>后台管理系统</h1>
                    <p>strive</p>
                </div>
                <div className={styles.form}>
                    <Space direction="vertical" size="middle" style={{display: 'flex'}}>
                        <Input placeholder="用户名" onChange={changeUsername} />
                        <Input.Password placeholder="密码" onChange={changePassword} />
                        <div className={styles.captchaBox}>
                            <Input placeholder="验证码" onChange={changeCaptcha} />
                            <div className={styles.captchaImg} onClick={getCaptchaImage}>
                                <img height="38" src={imageSrc} alt="" />
                            </div>
                        </div>
                        <Button className={styles.btn} type="primary" onClick={handleLogin}>登录</Button>
                    </Space>
                </div>
            </div>
        </div>
    );
};

export default Login;